<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>订单退款详情</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="客户名称">
          {{ form.customer_name }}
        </el-form-item>
        <el-form-item label="客户手机">
          {{ form.customer_mobile }}
        </el-form-item>
        <el-form-item label="微购儿账号">
          {{ form.we_account }}
        </el-form-item>
        <el-form-item label="退款订单编号">
          {{ form.refund_sn }}
        </el-form-item>
        <el-form-item label="原订单信息">
          <el-card shadow="none" style="min-height: 200px">
            <slot v-if="form.orderInfo&&form.orderInfo.goods_name">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="订单号：">{{ form.orderInfo.number_sn }}</el-form-item>
                  <el-form-item label="客户名：">{{ form.orderInfo.member_name }}</el-form-item>
                  <el-form-item label="客户手机：">{{ form.orderInfo.member_phone }}</el-form-item>
                  <el-form-item label="购买时间：">{{ form.orderInfo.buy_time }}</el-form-item>
                  <el-form-item label="已服务(总时长)：">{{ form.orderInfo.serverTime }}</el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品名：">{{ form.orderInfo.goods_name }}</el-form-item>
                  <el-form-item label="销售金额：">{{ form.orderInfo.goods_money }}</el-form-item>
                  <el-form-item label="销售提成：">{{ form.orderInfo.order_bonus }}</el-form-item>
                  <el-form-item label="预期奖金：">{{ form.orderInfo.bonus_money }}</el-form-item>
                </el-col>
              </el-row>
            </slot>
          </el-card>
        </el-form-item>
        <el-form-item label="退款说明">
          {{ form.description }}
        </el-form-item>
        <el-form-item label="补充图片">
          <div class="flex-row">
            <el-image
              v-for="item in form['pic_url']" :key="item"
              :src="item"
              :preview-src-list="form['pic_url']"
              style="width: 100px; height: 100px;margin-right: 20px;"/>
          </div>
        </el-form-item>
        <el-divider/>
        <el-form-item label="退款金额">
          {{ form.refund_money }}
        </el-form-item>
        <el-form-item label="付款地址">
          <el-radio-group v-model="form.pay_mode">
            <el-radio :label="form.pay_mode">{{ form.pay_mode===1?'微信':form.pay_mode===2?'支付宝':'银行卡' }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="账户姓名">
          {{ form.payer_name }}
        </el-form-item>
        <el-form-item label="付款账号">
          {{ form.payer_account }}
        </el-form-item>
        <slot v-if="form.status!==1">
          <el-divider/>
          <el-form-item label="扣除业绩">
            {{ form.achievement_money }}
          </el-form-item>
          <el-form-item label="扣除提成">
            {{ form.commission_money }}
          </el-form-item>
          <el-form-item label="扣除奖金">
            {{ form.bonus_money }}
          </el-form-item>
          <el-form-item label="审核备注">
            {{ form.verify_remark }}
          </el-form-item>
        </slot>
        <slot v-if="form.status===2">
          <el-divider/>
          <el-form-item label="付款图片">
            <div class="flex-row">
              <el-image
                v-for="item in form['sale_proof']" :key="item"
                :src="item"
                :preview-src-list="form['sale_proof']"
                style="width: 100px; height: 100px;margin-right: 20px;"/>
            </div>
          </el-form-item>
          <el-form-item label="付款备注">
            {{ form.account }}
          </el-form-item>
        </slot>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          pic_id: '',
          pic_url: []
        },
        formRules: {
        }
      }
    },
    watch: {},
    created() {
      this.id = this.$route.query.id;
      this.getData();
    },
    methods: {
      getData() {
        const url = 'achievementRefund/getDetail'
        const data = {
          id: this.id
        };
        this.$store.dispatch('GetConnect', {url, data}).then(res => {
          this.form = res.data
        }).catch(e => {
          this.$message.error(e.msg + ',请刷新或联系管理员')
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';

  .box-1 {
    max-width: 1000px;
    margin: 0 auto;

    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }

    .el-form {
      max-width: 900px;

      .title {
        font-weight: 600;
      }

      .remark {
        font-size: 13px;
        color: $textGray;
      }

      .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }

  .el-checkbox {
    margin-right: 30px;
  }

  .el-checkbox + .el-checkbox {
    margin-left: 0;
    margin-right: 30px;
  }
</style>
